<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader :list='list' @add="addFn" @checkAll='checkAllFn'
     ></TodoHeader>
    <TodoMain :list='showList' @del='delFn' @change='changeFn'></TodoMain>
    <TodoFooter :list='list' @clear='clearFn' :type='type' @changType='changTypeFn'
    ></TodoFooter>
  </section>
</template>

<script>
// 1.0 样式引入
import "./styles/base.css";
import "./styles/index.css";

import TodoHeader from "./components/th2";
import TodoMain from "./components/tm2";
import TodoFooter from "./components/tf2";

export default {
  // 局部注册组件
  components:{
TodoHeader,
TodoMain,
TodoFooter
  },
 
    data () {
  return {
    // data中默认使用本地的数据
    list:JSON.parse(localStorage.getItem('todoList')) || [],
    type:'all'
  }
},
methods: {
  // 父组件给子组件注册事件
  delFn(id){
this.list=this.list.filter(item => item.id !== id); // 把id过滤掉
  },
  changeFn(id){
    const result=this.list.find(item => item.id ===id)
    result.isDone=!result.isDone 
  },
  // 父组件接受name，并且添加
  addFn(name){
this.list.unshift({

  id:this.list.length ? this.list.at(-1).id + 1 : 100,
  name,
  isDone:false
})
  },
  clearFn(){
    this.list.filter(item => !item.isDone)
  },
  // 父组件处理更新父组件处理更新
  changTypeFn(type){
    this.type=type

  },
  checkAllFn(value){
this.list.forEach(item =>item.isDone=value)
  }
},
computed: {
  // 提供计算属性完成切换
showList(){
  if(this.type==='yes'){ //显示已完成
    return this.list.filter(item =>item.isDone===true)
  }else if(this.type==='no'){// 显示未完成
 return this.list.filter(item =>item.isDone===false)
  }else{ 
    return this.list // 全部显示 // 全部显示
  }
}
},
watch:{
  // 监视数组的变化
  list: {
    deep:true,
    handler(nweValue){
      localStorage.setItem('todoList',JSON.stringify(nweValue))
    }
  }
}
  
};
</script>